<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     html, body{user-select: none;}
    *{margin: 0;padding: 0}
    li{list-style: none}
    html,body{
        height: 100%;
        background-image: linear-gradient(to top, black , rgb(202, 196, 196),black
        );
    }
    #box{
        width: 100%;
        height: 285px;
        padding-top: 160px;
        position: absolute;
    }
    #box1{
        width: 285px;
        height: 285px;
        position: relative;
        left: 50%;
        margin-left: -142px;
    }
    #box1>img{
        width: 285px;
        height: 285px;
        border-radius:50%; 
    }
    #box2{
        width: 212px;
        height: 212px;
        position: relative;
        top: -248px;
        left: 50%;
        margin-left: -106px;
    }
    @keyframes mymove
    {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
    }
    #box2>img{
        width: 212px;
        height: 212px;
        border-radius:50%; 
    }
    #box3{
        position: relative;
        top: -250px;
        left: 50%;
    }
    #box3>span>img{
        width: 65px;
        height: 65px;
        margin-left: -32px;
    }
    a{
        text-decoration: none;
        color: white;
    }
    #box4{
        width:100%;
        height: 97px;
        background-color: black;
        position:absolute;
        bottom: 0px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-top:30%;
        border: 1px solid white;
        border-radius:20% 20% 0 0; 
    }
    #box4>div{
        color: white;
    }
    #box4>div>input{
        width: 30px;
        height: 25px;
    }
    #box4>audio{
        width:300px  ;
        height:35px ;

    }
    #box6{
        position: absolute;
        top: 80px;
        left: 50%;
        transform-origin: left top;
        transform:rotate(-18deg);
        transition: all 1s ease-in-out;
    }
    #box6>img{
        width: 84px;
        height: 136px;
    }
    /* 歌词....................... */
    #box7{
        color: black;
        width: 200px;
        height: 100px;
        padding: 416px 0px 0px 200px;
        overflow: hidden;
        position: relative;
        top: -150px;
    }
    #box7>.box71{
        text-align: center;
        margin-bottom: 10px;
    }
    #box7>.box72{
        width: 200px;
        height: 100px;
        overflow: hidden;
        text-align: center;
    }
    /* ....................... */    
    </style>
</head>
<body>
    <div id="box">
        <div id="box1">
            <img src="./img/OFKIRNXG8~T3TYVYCO)8(GK.png" alt="">
        </div>
        <div id="box2">
             <img src="./img/30T02O}$I6I[9ZZKGIBFQ~H.png" alt=""> 
        </div>
        <div id="box6">
            <img src="https://s3.music.126.net/mobile-new/img/needle-ab.png?4b81da043356110081e5ccaed2e6f2ad=" alt="">
        </div>
    </div>
<!-- ......................................................................... -->
    <div id="box7">
        <div class="box71">
            <h2>20岁的某一天</h2>
            <h3>花粥-乍见之欢</h3>
        </div>
        <div class="box72" style="margin-top:0px">
            <ul>
                <li>二十岁的某一天</li>
                <li>和你牵手走到天桥边</li>
                <li>你兜里只有五块钱</li>
                <li>我们吃了一碗牛肉面</li>
                <li>你说什么爱情都会变</li>
                <li>你说你现在也没有钱</li>
                <li>你说谢谢我陪你这些天</li>
                <li>你说以后不要再被别人骗</li>
                <li>三十岁的某一天</li>
                <li>我和他路过这条街</li>
                <li>我说想吃碗牛肉面</li>
                <li>他说他身上没零钱</li>
                <li>我已经想不起你的脸</li>
                <li>我也没有你的照片</li>
                <li>时间它杀死了所有的从前</li>
                <li>我们也没必要再去怀念</li>
                <li>你说什么爱情都会变</li>
                <li>你说你现在也没有钱</li>
                <li>你说谢谢我陪你这些天</li>
                <li>你说以后不要再被别人骗</li>
                <li>八十岁的某一天</li>
                <li>我能否再想起你的脸</li>
            </ul>
        </div>
    </div>
<!-- ......................................................................... -->
    <div id="box3">
        <span>
            <img src="./img/play_btn_3x.png" alt="" id="img" onclick="playOrPaused('firefox',this);">
        </span>
     </div>
         <div id="box4">
                <a href="javascript:void(0);" onclick="getCurrentTime('firefox');">获取播放时间</a>
                <a href="javascript:void(0);" onclick="change();">30秒开始播放</a>
                <a href="javascript:void(0);" onclick="playOrPaused('firefox',this);" id="s11">播放</a>
                <a href="javascript:void(0);" onclick="hideOrShowControls('firefox',this);">隐藏控制框</a>
                <a href="javascript:void(0);" onclick="muted('firefox',this);">开启静音</a>
            <div>
                    <input type="button" value="+" id="upVol" onclick="vol('firefox' , 'up' , this )"/>音量<input type="button" value="-" onclick="vol('firefox' , 'down' ,this )"/> 
            </div>
            <audio  src="./img/20岁的某一天.mp3" id="audio" controls="controls"></audio>
         </div>
</body>
<script>
var aObj = document.querySelector('#s11')
var num = 0
var t =null
function b(){
   t= setInterval(function(){
        num--
        if(num<=-460){
            num =0
        }
        document.querySelector('ul').style.marginTop=num+'px'
    },800)
}
var audio  = document.querySelector('audio')
function change() {
	audio.currentTime  = 30
}
function getCurrentTime(id){			
	alert(parseInt(audio.currentTime) + '秒');
}
var box3Obj = document.querySelector('#box3')
function playOrPaused(id,obj){
        if(audio.paused){
            audio.play();
            document.querySelector('#box2').style.animation='mymove 10s linear infinite';
            document.querySelector('#box6').style.transform='rotate(0deg)';
            obj.innerHTML='暂停';
            box3Obj.style.display ='none'
            b()
        }else{
            audio.pause();
            obj.innerHTML='播放';
            document.querySelector('#box2').style.animationPlayState='paused';
            document.querySelector('#box6').style.transform='rotate(-18deg)';
            box3Obj.style.display ='block'
            clearTimeout(t)
        }
}
function hideOrShowControls(id,obj){
	if(audio.controls){
		audio.removeAttribute('controls');
		obj.innerHTML = '显示控制框'
		return;
	}
	audio.controls = 'controls';
	obj.innerHTML = '隐藏控制框'
	return;
}
function vol(id,type , obj){
	if(type == 'up'){
		var volume = audio.volume  + 0.1;
		if(volume >=1 ){
			volume = 1 ;
		
		}
		audio.volume =  volume;
	}else if(type == 'down'){
		var volume = audio.volume  - 0.1;
		if(volume <=0 ){
			volume = 0 ;
		}
		audio.volume =  volume;
	}
	document.getElementById('nowVol').innerHTML = returnFloat1(audio.volume);
}
function muted(id,obj){
	if(audio.muted){
		audio.muted = false;
		obj.innerHTML = '开启静音';
	}else{
		audio.muted = true; 
		obj.innerHTML = '关闭静音';
	}
}
function returnFloat1(value) {    
	value = Math.round(parseFloat(value) * 10) / 10;
	if (value.toString().indexOf(".") < 0){
		value = value.toString() + ".0";
	}
	return value;
}
</script>
</html>